<template>
  <main class="pageIndex">
    <h1>{{pathName}}</h1>
    <ol>
      <li :key="it.link" v-for="it in list">
        <router-link  :to="it.link">{{it.title}}</router-link>
      </li>
    </ol>
  </main>
</template>

<script>
const sidebar = require('../sidebar')
console.log(sidebar)
function mapLink(children) {
  return children.map(it => {
    return {
      title: it[1],
      link: it[0].split('/')[1]
    }
  })
}
export default {
  props: ['sidebarItems'],
  computed: {
    pathName: function () {
      console.log(this.$route.path)
      const pathName = this.$route.path.replace(/\//ig,'')
      return pathName
    },
    list: function() {
      let arr = []
      try {
        const obj = sidebar.find(item => item.pathName === this.pathName)
        if(obj) {
          arr = mapLink(obj.children)
        }
      }catch(err){
        console.log(err)
      }
      return arr
    }
  }
}
</script>
